<template>
  <main class="login-container">
    <section class="section-header">
      <img class="nav-logo" src="../../assets/front/img/logo.png" @click="$router.push('/f')">
      <div class="welcome">
        欢迎登录
      </div>
    </section>
    <section class="main-section">
      <el-form class="login-form" auto-complete="on"
               :model="loginForm" :rules="loginRules" ref="loginForm"
               :show-message="false" :status-icon="true"
               @keyup.native.enter="handleLogin">
        <div class="login-title">会员登录</div>
        <el-form-item prop="userName">
          <el-input v-model="loginForm.userName" class="text username" type="text" placeholder="用户名"/>
        </el-form-item>
        <el-form-item>
          <el-input v-model="loginForm.password" class="text password" type="password" placeholder="密码"/>
        </el-form-item>
        <div class="remember">
          <input type="checkbox"/>下次自动登录
        </div>
        <div class="submit-button" @click="handleLogin">登录</div>
        <div class="ops">
          <router-link to="/f/registry" class="op">免费注册</router-link>
          <div class="op">忘记密码？</div>
        </div>
      </el-form>
    </section>
  </main>
</template>

<script>
export default {
    components: {},
    data() {
        return {
            loginForm: {
                userName: '',
                password: ''
            },
            loginRules: {
                userName: [{ required: true, trigger: 'blur' }],
                password: [{ required: true, trigger: 'blur' }]
            },
            loading: 0
        };
    },
    methods: {
        handleLogin() {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.loading++;
                    this.$store.dispatch('LoginByUsername', this.loginForm)
                        .then((data) => {
                            this.loading--;
                            if (!data.user) {
                                return;
                            }
                            if (data.user.type === this.$store.state.userType.admin) {
                                this.$router.push({ path: '/a' });
                            } else {
                                this.$router.push({ path: '/u/user' });
                            }
                        })
                        .catch(() => {
                            this.loading--;
                        });
                }
            });
        }
    }
};
</script>
<style lang="scss">
  @import "../../assets/front/front";

  .login-container {
    width: $page-width;
    .section-header {
      padding: 10px 5px;
      height: 85px;
      display: flex;
      align-items: center;
      .nav-logo {
      }
      .welcome {
        margin-left: 10px;
        padding: 0 15px;
        height: 60px;
        @include flex-center;
        font-size: 24px;
        color: #646464;
        border-left: $border;
      }
    }
    .main-section {
      height: 570px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      background: url("../../assets/front/img/login_bg.png");
      .login-form {
        padding: 26px 54px;
        width: 420px;
        height: 410px;
        background-color: rgba(250, 250, 250, 0.75);
        border-radius: 5px;
        border: solid 1px rgba(230, 230, 230, 0.75);
        opacity: 0.75;
        .login-title {
          margin-bottom: 15px;
          padding-bottom: 10px;
          font-size: 22px;
          color: #646464;
          border-bottom: $border;
        }
        .text {
          width: 100%;
          height: 40px;
        }
        .remember {
          margin-top: 15px;
          @include flex-center;
          justify-content: flex-start;
          > input {
            margin-right: 8px;
          }
        }
        .submit-button {
          margin-top: 15px;
          width: 100%;
          height: 40px;
          @include flex-center;
          color: white;
          background-color: #009040;
          border-radius: 4px;
          font-size: 20px;
          letter-spacing: 8px;
          cursor: pointer;
        }
        .ops {
          margin-top: 40px;
          display: flex;
          justify-content: flex-end;
          .op {
            margin-left: 20px;
            color: $main-color;
          }
        }
      }
    }
  }

</style>
